import { fabric } from 'fabric';

class Img extends fabric.Image {
  constructor(imgElement, options = {}) {
    const defaultOptions = {
      left: 100,
      top: 100,
      scaleX: 1,
      scaleY: 1,
      fill: '#ffffff',
      strokeWidth: 0,
      stroke: '#000000',
      selectable: true,
      cornerSize: 10,
      transparentCorners: false,
      hasRotatingPoint: true,
      padding: 5,
      crossOrigin: 'anonymous',
      id: '',  // 添加id属性
    };

    // 合并默认选项和传入的选项
    const mergedOptions = {
      ...defaultOptions,
      ...options,
    };

    // 确保控制点颜色与边框颜色一致
    mergedOptions.cornerColor = mergedOptions.stroke;
    mergedOptions.borderColor = mergedOptions.stroke;

    super(imgElement, mergedOptions);

    // 如果提供了canvas，自动添加到画布
    if (options.canvas) {
      options.canvas.add(this);
      options.canvas.requestRenderAll();
    }
  }

  // 静态方法：从URL创建图片
  static fromURL(url, options = {}) {
    return new Promise((resolve, reject) => {
      fabric.Image.fromURL(
        url,
        (img) => {
          if (!img) {
            reject(new Error('Failed to load image'));
            return;
          }

          const imgInstance = new Img(img.getElement(), options);

          // 如果提供了最大尺寸，根据尺寸缩放图片
          if (options.maxWidth || options.maxHeight) {
            imgInstance.scaleToSize(options.maxWidth, options.maxHeight);
          }

          resolve(imgInstance);
        },
        {
          crossOrigin: 'anonymous',
          ...options,
        },
      );
    });
  }

  // 根据最大宽度和高度等比例缩放图片
  scaleToSize(maxWidth, maxHeight) {
    if (!maxWidth && !maxHeight) return this;

    const imgWidth = this.width;
    const imgHeight = this.height;

    // 如果只提供了一个维度，按照比例计算另一个维度
    if (maxWidth && !maxHeight) {
      if (imgWidth > maxWidth) {
        const scale = maxWidth / imgWidth;
        this.scale(scale);
      }
    } else if (!maxWidth && maxHeight) {
      if (imgHeight > maxHeight) {
        const scale = maxHeight / imgHeight;
        this.scale(scale);
      }
    }
    // 如果两个维度都提供了，取较小的缩放比例
    else if (maxWidth && maxHeight) {
      if (imgWidth > maxWidth || imgHeight > maxHeight) {
        const scaleX = maxWidth / imgWidth;
        const scaleY = maxHeight / imgHeight;
        const scale = Math.min(scaleX, scaleY);
        this.scale(scale);
      }
    }

    return this;
  }

  // 更新属性
  updateProps(props) {
    this.set(props);
    // 如果更新了边框颜色，同时更新控制点颜色
    if (props.stroke) {
      this.set({
        cornerColor: props.stroke,
        borderColor: props.stroke,
      });
    }
    this.canvas?.requestRenderAll();
    return this;
  }

  // 移到顶层
  bringToFront() {
    if (this.canvas) {
      this.canvas.bringToFront(this);
      this.canvas.requestRenderAll();
    }
    return this;
  }

  // 移到底层
  sendToBack() {
    if (this.canvas) {
      this.canvas.sendToBack(this);
      this.canvas.requestRenderAll();
    }
    return this;
  }

  // 删除自身
  remove() {
    if (this.canvas) {
      this.canvas.remove(this);
      this.canvas.requestRenderAll();
    }
  }

  // 设置图片不透明度
  setOpacity(opacity) {
    this.set('opacity', Math.max(0, Math.min(1, opacity)));
    this.canvas?.requestRenderAll();
    return this;
  }
}

export default Img;
